<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>STF-EASE</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        body {
            text-align: center;
            background: rgba(100, 100, 100, .5);
        }
        .container canvas {
            margin: 8px;
        }
        a:hover {
            color:blue;
        }
    </style>
</head>
<body lang="zh-CN">
    <div class="container"></div>
    <select id="quality" style="position: absolute; right: 12px; top: 12px; font-size: 16px; width: 80px;">
        <option value="720">高清</option>
        <option value="360" selected>中等</option>
        <option value="240">略差</option>
        <option value="120">抽象</option>
    </select>
    <label style="position: absolute; right: 14px; top: 42px; font-size: 16px; width: 80px; text-align: right; display: none;">
        <input id="muti" type="checkbox"/> 群控
    </label>
    <script type="module" >
        import Ease, { defaultCommands, ActionType } from "/static/bundle.js"
        const query = (items => items.reduce((m, a) => {
            const [k, v] = a.split('=')
            m[k]= v
            return m
        }, {}))((location.search || '?').slice(1).split('&'))
        const urls = query.url ? ['ws://' + query.url] : location.pathname.match(/[^\/,]+/g).map(id => 'ws://' + location.host + '/' + id)
        const container = document.querySelector('.container')
        const quality = document.querySelector('#quality')
        const muti = document.querySelector('#muti')

        if (urls.length > 1) {
            muti.parentElement.style.display = 'block'
        }

        let ws_list = []
        const sender = function (...args) {
            ws_list.forEach(w => {
                w.send.apply(w, args)
            })
        }

        const renderStf = function (url) {
            let ws
            let ease
            const canvas = document.createElement('canvas')
            container.appendChild(canvas)
            const createEase = function createEase () {
                ws = new WebSocket(url + '?screen_width=' + quality.value)
                ws.addEventListener('open', function () {
                    ws_list.push(ws)
                })
                return ease = Ease({
                    ws,
                    sender: muti.checked ? sender : undefined,
                    canvas,
                    // readonly: true,
                    onDevice: device => {
                        console.log(device)
                    },
                    commands: defaultCommands.concat({
                        title: 'Input',
                        execute: () => new Promise(resolve => {
                            const str = prompt('input: ')
                            if (str) {
                                ws.send(ActionType.COMMAND + `: input text ` + str)
                            }
                            resolve(true)
                        })
                    }),
                    height: Math.min(document.documentElement.clientHeight - 10, 780),
                    onTouchMeta: function (meta) {
                        if (meta) {
                            // alert('minitouch初始化成功')
                        } else {
                            console.log('minitouch初始化失败！')
                        }
                    },
                    onClose: function () {
                        ws_list = ws_list.filter(t => t != ws)
                        setTimeout(createEase, 2000)
                    }
                })
            }
            createEase()
    
            quality.addEventListener('change', function (e) {
                ws.send(`105: `)
            })
            muti.addEventListener('change', function () {
                ease.setSender(muti.checked ? sender : ws.send.bind(ws))
            })
            addEventListener('resize', function () {
                ease && ease.updateHeight(Math.min(document.documentElement.clientHeight - 10, 780))
            })
        }
        urls.forEach(renderStf)

        
    </script>
</body>
</html>